<template>
  <BKModal
    v-model="visible"
    :title="title"
    :width="width"
    :height="height"
    @close="$emit('close')"
    class="ysqjcdp-modal"
    transfer
  >
    <div class="full-box p-l-mini p-v-mini">
      <BKTable
        :columns="columns"
        :data="tableData"
        :loading="loading"
        border="none"
        size="small"
        :has-pager="true"
        :stripe="false"
        :scroll-y="{enabled: true}"
        class="ysqjcdp-table"
      />
    </div>
  </BKModal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => []
    },
    loadFunction: {
      type: Function,
      default: () => { return [] }
    },
    width: {
      type: String,
      default: '1000px'
    },
    height: {
      type: String,
      default: '70%'
    },
    title: {
      type: String,
      default: '详情'
    },
    staticData: {
      type: Array,
      default: () => null
    }
  },
  data () {
    return {
      tableData: [],
      loading: false,
      hasPager: false
    }
  },
  created () {
    if (this.staticData !== null) {
      this.tableData = this.staticData
    } else {
      this.loading = true
      this.loadFunction().then(res => {
        if (res.length > 100) {
          this.hasPager = true
        }
        console.log({ hasPager: this.hasPager })
        this.tableData = res
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
  methods: {
  }
}
</script>
